<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>发布通告</title>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/umeditor1.2.3-src/themes/default/_css/umeditor.css" rel="stylesheet" />
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">


    <!--<link rel="stylesheet" href="/statics/css/email/send.css?t=1">-->

    <style>
        .table-my-box{
            padding:10px 15px;
            background: #f7f8fa;
        }
        .table-my{
            width: 100%;
        }
        .table-my .title{
            width: 50px;
            text-align: left;
        }
        .table-my .value{
            padding: 5px 0;
        }
        .webuploader-container {
            position: relative;
            margin-top: 15px;
        }
        #divUploadedFiles{
            padding: 20px 10px;
            border:1px dashed  #ddd;
            width:50%;
        }
        .edui-body-container{
            min-height: 160px !important;
        }

        .form-control{
            height: 24px;
            padding: 0 6px;
            font-size: 12px;
        }
        .selectItem{
            padding-left: 6px;
        }
        .selectItem span{
            margin-right: 5px;
        }
    </style>
</head>
<body style="background-color:#fff">
<section class="content"  id="app" @click="unselectUser" style="width: 600px;">
    <!--<div class="selectItem">已选需要通告的人员：-->
    <!--<span v-for="(user,i) in email.receivers">{{user.userName}}</span>-->
    <!--</div>-->
    <div class="box-body no-padding " style="overflow: auto;background: #fff;">
        <div class="box-body">
            <div class="table-my-box">
                <table cellspacing="0" class="table-my">
                    <tbody>
                    <tr>
                        <td class="title" style="height:auto;">
                            <a href="javascript:void(0);" id="aReceivers" tabindex="-1">收件人</a>
                        </td>
                        <td class="value">
                            <div class="userbox form-control pull-left" style="height:auto;" id="receivers" v-on:click.stop="inputFocus('txtReceiver')" >
                                <div v-for="(user,i) in email.receivers" class="user" v-bind:class="{ select:receiverSelectedIdx==i }" v-on:click="selectUser(i,'receiverSelectedIdx')">{{user.userName}};</div>
                                <input type="text" id="txtReceiver" @keyup.delete="deleteUser('receivers','receiverSelectedIdx',$event)"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="title" style="height:auto;">
                            <a href="javascript:void(0);" id="aCopiers" tabindex="-1">抄送人</a>
                        </td>
                        <td class="value">
                            <div class="userbox form-control" style="height:auto;" id="copiers" v-on:click.stop="inputFocus('txtCopier')">
                                <div v-for="(user,i) in email.copiers" class="user" v-bind:class="{ select: copierSelectedIdx == i }" v-on:click="selectUser(i,'copierSelectedIdx')">{{user.userName}};</div>
                                <input type="text" id="txtCopier" @keyup.delete="deleteUser('copiers','copierSelectedIdx',$event)"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="title">
                            主&nbsp;&nbsp;题
                        </td>
                        <td class="value">
                            <input type="text" class="form-control" id="txtSubject" v-model="email.mains.subject" >
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <input type="button" value="选择所有人" v-if="currentUser.tel=='13643419824'" @click="selectAllUser"/>
            <!--<div id="divUpload" style="width: 300px;">-->
                <!--添加附件-->
            <!--</div>-->
            <!--<div id="divUploadedFiles" v-if="email.attaches.length>0">-->
                <!--<div v-for="(attach,i) in email.attaches" class="progressobj">-->
                    <!--<input type="button" class="IcoNormal" style="float:left;"/>-->
                    <!--<div class="filename" style="float:left;">-->
                        <!--{{attach.name}}-->
                    <!--</div>-->
                    <!--<div class="delfile"><a v-on:click="deleteFile(i)">删除</a></div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <!--<div class="wyui-progress" id="progress">-->
        <!--</div>-->
        <div class="box-body" style="margin-top: 10px;">
            <textarea id="emailContent" style="width:100%;height:auto;padding:10px;padding-left:20px;" v-model="email.mains.content"></textarea>
        </div>
        <div class="form-group text-center">
            <input type="button" id="btnSend" @click="send" class="btn oaBtn btn-sm" value="发布" style="margin-top: 20px;"/>
            <div class="clearfix"></div>
        </div>
    </div>


</section>

<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="/dist/js/oa.js?t=fff81c63"></script>
<script src="editor_api.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/third-party/template.min.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/umeditor.config.js"></script>
<script src="/dist/plugins/umeditor1.2.3-src/lang/zh-cn/zh-cn.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script>
    var api = frameElement.api, W = api.opener;
    var vueApp = new Vue({
        el: '#app',
        data: {
            currentUser:getCurrentUser(),
            uploader: null,
            editor: null,
            email: {
                receivers: [],
                copiers: [],
                attaches: [],
                mains: {
                    subject: '',
                    content: '',
                    createUserId: getCurrentUser().id,
                    etype: 2,
                    dataId: 0,
                    parentId: $.wyui.page.urlParams.emailId,
                    updateUserId: getCurrentUser().id
                }
            },
            user:{
                id:0,
                description:'',
                userId:$.wyui.page.urlParams.id,
                senderId:getCurrentUser().id,
                senderName:getCurrentUser().name,
                noticeDate:''
            },
            receiverSelectedIdx: -1,
            copierSelectedIdx: -1
        },
        methods: {
            selectAllUser:function () {
                var that = this;
                var receivers = new Array();
                $.wyui.postMethod(urlConfig.email.getOrgInbox,{userId:this.currentUser.id},function (nodes) {
                    for (var i = 0; i < nodes.length; i++) {
                        if(nodes[i].type == "user") {
                            receivers.push({userId: nodes[i].id, userName: nodes[i].name});
                        }
                    }
                    that.email.receivers = receivers;
                });
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            selectUser: function (i, prop) {
                this.receiverSelectedIdx = -1;
                this.copierSelectedIdx = -1;
                this[prop] = i;
            },
            unselectUser: function () {
                this.receiverSelectedIdx = -1;
                this.copierSelectedIdx = -1;
            },
            deleteUser: function (prop, idx, event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this[idx] > -1) {
                        this.email[prop].splice(this[idx], 1);
                        this.receiverSelectedIdx = -1;
                        this.copierSelectedIdx = -1;
                    } else {
                        this[idx] = this.email[prop].length - 1;
                    }
                }
            },
            deleteFile: function (i) {
                this.email.attaches.splice(i, 1);
            },
            send: function () {
                var that = this;
                if (this.email.receivers.length == 0) {
                    alert("请选择收件人！");
                    return;
                }
                if (this.email.mains.subject == "") {
                    alert("请输入邮件主题！");
                    return;
                }
                this.email.mains.content = this.editor.getContent();
                this.user.description= ((this.editor.getContent()).replace(/<\/?.+?>/g, "")).replace(/&nbsp;/g, " ");
                this.user.noticeDate= new Date().Format("yyyy-MM-dd");

                $.wyui.postMethod(urlConfig.email.sendEmail, trimRN(that.email), function (r) {
                    $.wyui.postMethod(urlConfig.system.user.userDesc, that.user, function (r) {
                        alert("通告发送成功");
                        api.close();
                    });

                })

            }
        },
        mounted: function () {
            //初始化下拉框
            $(".select2").select2();
            var that = this;
            this.editor = UM.getEditor('emailContent');
            this.uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                // 文件接收服务端。
                server: server.fjIp + "/attach/uploadFile.json",
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#divUpload',
                duplicate: true
            });
            this.uploader.on("uploadStart", function () {
                $("#progress").show();
            });
            this.uploader.on("uploadComplete", function () {
                $("#progress").hide();
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            this.uploader.on('uploadSuccess', function (file, response) {
                that.email.attaches.push({id: response.id, name: response.name, url: response.url});
            });

            // 文件上传失败，显示上传出错。
            this.uploader.on('uploadError', function (file) {
                alert("上传失败！");
            });

            //判断是否有传过来的emailId
            var that = this;
        }
    });
    $(function () {
        $("#txtReceiver,#txtCopier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                console.log("users="+ users);
                if(users) {
                    for (var i = 0; i < users.length; i++) {
                        $("<li></li>").data("autoComplete",
                            users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                            "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                            .appendTo(panel);
                    }
                }
            },
            selected: function (user) {
                var receiverIds = new Array();
                for (var i = 0; i < vueApp.email.receivers.length; i++) {
                    receiverIds.push(vueApp.email.receivers[i].userId);
                }
                for (var i = 0; i < vueApp.email.copiers.length; i++) {
                    receiverIds.push(vueApp.email.copiers[i].userId);
                }
                if($.inArray(user.id,receiverIds) > -1){
                    alert("收件人或抄送人重复");
                    $(this).val("");
                    return false;
                }else {
                    if (this.id == "txtReceiver") {
                        vueApp.email.receivers.push({userId: user.id, userName: user.name});
                    } else {
                        vueApp.email.copiers.push({userId: user.id, userName: user.name});
                    }
                    $(this).val("");
                    return false;
                }
            },
            height: 210,
            width: 300
        });
    });
</script>



</body>
</html>